<template>
    <div>
        <h2>toRef的使用及特点</h2>
        <h3>state:{{state}}</h3>
        <h3>age:{{age}}</h3>
        <h3>money:{{money}}</h3>
        <button @click="update">更新</button>
        <Child :age="age" />
    </div>
</template>
<script lang="ts">
import { defineComponent, reactive, toRef, ref } from 'vue'
import Child from './components/Child.vue'
export default defineComponent({
    name: 'App',
    setup() {
        const state = reactive({
            age: 5,
            money: 100,
        })
        // 把响应式数据state对象中的某个属性age变成了ref对象
        const age = toRef(state, 'age')
        console.log(age)
        // 把响应式数据state对象中的某个属性money使用ref进行包装,变成了ref对象
        const money = ref(state.money)
        console.log(money)
        const update = () => {
            // 更新数据
            state.age += 1
            // age.value += 2
            // money.value += 10
        }
        return {
            state,
            age,
            money,
            update,
        }
    },
    components: {
        Child,
    },
})
</script>
<style>
</style>